<template>
    <div style="padding-top: 1%">
        <Card :bordered="false" style="margin-left: 16%;margin-right: 1%" dis-hover>
            <p slot="title" style="font-size: larger;font-weight: bolder">博客管理 / 分类列表</p>
            <div>
                <!--添加按钮-->
                <div>
                    <Button type="primary" icon="md-add" @click="addCateVisable=true">添加分类</Button>
                </div>
                <Alert style="margin-top: 1%" show-icon>分类列表</Alert>
                <!--分类列表-->
                <div style="margin-top: 1%">
                    <Table height="430" row-key="id" :columns="categoryColumns" :data="categoryList" border>
                        <template slot-scope="{ row }" slot="changeItem">
                            <Button type="warning" style="margin-right:6%" @click="showUpdateModal(row)">修改</Button>
                            <Poptip confirm title="确定删除该分类吗?" @on-ok="deleteCate(row.cateId)">
                                <Button type="error">删除</Button>
                            </Poptip>
                        </template>
                    </Table>
                </div>
            </div>
        </Card>
        <!--添加分类对话框-->
        <Modal v-model="addCateVisable" title="添加分类" @on-ok="addCate">
            <Form ref="cateNameRef" :label-width="80">
                <FormItem label="分类名">
                    <Input v-model="categName" placeholder="请输入分类名" @keyup.native.enter="addCate"/>
                </FormItem>
            </Form>
        </Modal>
        <!--修改对话框-->
        <Modal v-model="editCateVisable" title="修改分类" @on-ok="updateCate('cateRef')">
            <Form ref="cateRef" :model="cate" :rules="cateRule" :label-width="80">
                <FormItem label="分类名">
                    <Input v-model="cate.cateName" placeholder="请输入分类名" @keyup.native.enter="updateCate('cateRef')"/>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        // 分类名
        categName: '',
        // 控制添加分类对话框显示和隐藏
        addCateVisable: false,
        // 表格映射规则
        categoryColumns: [
          {
            title: '#',
            key: 'cateId',
            align: 'center'
          },
          {
            title: '分类名称',
            key: 'cateName',
            align: 'center'
          },
          {
            title: '操作',
            slot: 'changeItem',
            width: '200',
            align: 'center'
          }
        ],
        // 表格数据
        categoryList: [],
        // 分类表格
        cate: {
          cateId: 0,
          cateName: null
        },
        editCateVisable: false,
        // 修改分类表单校验
        cateRule: {
          cateName: [
            { required: true, message: '分类名不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    mounted() {
      this.getCategoryList()
    },
    methods: {
      // 获取分类列表
      getCategoryList() {
        this.$http.get('category').then(res => {
          res = res.data
          this.categoryList = res.data
        })
      },
      // 添加分类
      addCate() {
        if (this.categName === null || this.categName === '') {
          this.$Message.info('分类名不能为空!')
          return
        }
        var params = new URLSearchParams()
        params.set('name', this.categName)
        this.$http.post('category', params).then(res => {
          res = res.data
          if (res.code === 5030) {
            this.$Message.success(res.msg)
            this.addCateVisable = false;
            this.getCategoryList()
            this.categName = ''
          } else {
            this.$Message.error(res.msg)
            this.addCateVisable = true
          }
        })
      },
      // 刪除分类
      deleteCate(id) {
        this.$http.delete('category?id=' + id).then(res => {
          res = res.data
          if (res.code === 5080) {
            this.$Message.success(res.msg)
            this.getCategoryList()
          } else {
            this.$Message.error(res.msg)
          }
        })
      },
      // 修改分类
      updateCate(name) {
        this.$refs[name].validate(valid => {
          if (!valid) return
          // 更新标签
          var params = new URLSearchParams(this.cate)
          this.$http.put('category', params).then(res => {
            res = res.data
            if (res.code === 5060) {
              this.editCateVisable = false
              this.$Message.success(res.msg)
              this.getCategoryList()
            } else {
              this.$Message.error(res.msg)
              this.editCateVisable = true
            }
          })
        })
      },
      // 显示修改对话框
      showUpdateModal(row) {
        this.editCateVisable = true
        this.cate.cateId = row.cateId
        this.cate.cateName = row.cateName
      }
    }
  }
</script>

<style scoped>
</style>
